<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="script/jquery-1.7.2.js"></script>
  <script>
    $(function () {
      $("#checkedAllBtn").click(function () {
        $("[name=items]").prop("checked", true)
        $("#checkedAllBox").prop("checked", $("[name=items]:checked").length === $("[name=items]").length);
      })
      $("#checkedNoBtn").click(function () {
        $("[name=items]").prop("checked", false)
        $("#checkedAllBox").prop("checked", $("[name=items]:checked").length === $("[name=items]").length);
      })
      $("#checkedRevBtn").click(function () {
        $("[name=items]").each(function (index, item) {
          item.checked = !item.checked
        })
        $("#checkedAllBox").prop("checked", $("[name=items]:checked").length === $("[name=items]").length);
      })
      $("#checkedAllBox").click(function () {
        this.checked ? $("[name=items]").prop("checked", true) : $("[name=items]").prop("checked", false)
      })
      $("#sendBtn").click(function () {
        $("[name=items]:checked", "form").each(function (index, item) {
          alert(item.value)
        })
      })
      $("[name=items]").click(function () {
        $("#checkedAllBox").prop("checked", $("[name=items]:checked").length === $("[name=items]").length);
      })
    })

  </script>
</head>
<body>
<form method="post" action="">

  你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选

  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="篮球"/>篮球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　选"/>
  <input type="button" id="checkedNoBtn" value="全不选"/>
  <input type="button" id="checkedRevBtn" value="反　选"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>
</body>
</html>
